<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱豆集锦</title>
    <link rel="stylesheet" href="./css/show.css">
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/jquery3.4.1.js"></script>

</head>

<body>


    <div class="nav">

    </div>
    <div class="content">
        <!-- 左右按钮 -->
        <div class="btn-left-right">
            <a id="first" href="">
                <</a> <a id="last" href="">>
            </a>
        </div>
        <div class="center">
            <ul>
                <li><img src="./imgs/li1.jpg" alt=""></li>
                <li><img src="./imgs/li2.jpg" alt=""></li>
                <li><img src="./imgs/xue1.jpg" alt=""></li>
                <li><img src="./imgs/xue2.jpg" alt=""></li>
                <li><img src="./imgs/xue3.jpg" alt=""></li>
            </ul>
        </div>
        <div class="btu">
        </div>
    </div>

    <div class="zong_xin">
        <!-- 所有的心都在这里 -->
        <div style="opacity: 1;" class="ai">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>

    <script>
        $(function () {
            var i = 0;
            //设置一个计时器,每点击一次,移动500px的juli
            $('#first').on('click', function (e) {
                e.preventDefault();
                if (i <= 0) {
                    i = 5;
                }
                i--;
                left();
            })
            left = function () {
                var ju = i * -500
                $('.center').animate({ left: ju + 'px' }, 1000)
            };
            /////////////////////////////////////////////////////////////////
            $('#last').on('click', function (e) {
                e.preventDefault();
                i++;
                if (i >= 5) {
                    i = 0;
                }
                right();
            })
            right = function () {
                var ju = i * -500
                $('.center').animate({ left: ju + 'px' }, 1000)
            }
            // ////////////////////////////////////
            // 创造出来5个按钮,并给他们按下事件
            $('.btu').html(`<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>`)
            $('.btu li').on('click', function () {
                var zhi = $(this).text();
                i = zhi - 1;
                console.log(i);
                var zhi = (zhi - 1) * -500;
                $('.center').animate({ left: zhi + 'px' }, 1000)
            })

            // 鼠标移入停止计时器
            $('.content').on('mouseover', function () {
                clearInterval(time);
            });
            $('.content').on('mouseout', function () {
                clearInterval(time);
                time = setInterval(() => {
                    $('#last').click();
                    console.log(2222);
                }, 2000);
            })
            // 打开页面的时候启动计时器
            time = setInterval(() => {
                $('#last').click();
                // console.log(1111);
            }, 2000);




            //上面的是轮播图部分,下面决定写,页面下粉色的小心心
            // 获取页面的
            // 1.生成一个随机的百分比数,让心随机出现再屏幕的随机位置

            //让心出现后往下走,并且渐渐透明

            // 设置一个计时器,让他一直加1,加到100
            var q = 0;
            setInterval(function () {
                var suiji = Math.ceil(Math.random() * 100);  //生成的一百以内的随机数
                //给每个新增加的div一个坐标   ,并且
                $('.zong_xin').append(`<div style="opacity: 1;" class="ai">
                                         <div class="one"></div>
                                            <div class="two"></div>
                                            <div class="three"></div>
                                         </div>`);// 把克隆出来的进行追加到$('.zong_xin')上

                $('.zong_xin>div').eq(q).css('left', `${suiji}%`);//设置x轴上的位置


                $('.zong_xin>div').eq(q).css(`top`, `-1%`);  //设置y轴上的位置

                // `${suiji + 20}%`
                var s = $('.zong_xin>div').eq(q).animate({ top: 80 + '%', opacity: 5 + '%' }, 5000)//.remove();   //做完动画之后自杀
                console.log($('.zong_xin>div'));
                if ($('.zong_xin>div').top == 80 + '%') {

                }
                q++;
            }, 100)
        })
    </script>
</body>

</html>